<template>
	<div class="register">
		<img src="../images/bg.png" alt="" />
		<div class="yy"></div>
		<div class="con">
			<div class="tx"></div>
			<form>
				<!--<i class="iconfont icon-daohangshouye font"></i>-->
				<el-input v-model="name" placeholder="输入手机号"></el-input>
			</form>
			<form>
				<!--<i class="iconfont icon-daohangshouye font"></i>-->
				<el-input placeholder="输入验证码"></el-input>
				<div class="hq">获取验证码</div>
			</form>
			<form>
				<!--<i class="iconfont icon-daohangshouye font"></i>-->
				<el-input v-model="password" placeholder="输入密码"></el-input>
			</form>
			<div class="zc">注册代表你同意<span>微尘用户协议</span></div>
			<div class="btn" @click="demo">注册</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"register",
		data(){
			return{
				name:"",
				password:""
			}
		},
		methods:{
			demo(){
				this.$axios.post("http://127.0.0.1:3000/register",{
					username:this.name,
       				password:this.password
				})
				.then(res => {
					if(res.data.msg == "注册成功"){
						alert("注册成功，快去登录吧");
						window.location.href = "http://localhost:8080/#/login";
					}else{
						alert("注册失败")
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.register{
		position: relative;
		.yy{
			position: absolute;
			background: rgba(0,0,0,0.2);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.con{
			position: absolute;
			top: 150/50rem;
			left: 55/50rem;
			.btn{
				font-size: 16/50rem;
				color:#fff;
				width: 270/50rem;
				background: #3AAE95;
				opacity: 0.5;
				height: 50/50rem;
				line-height: 50/50rem;
				border-radius: 5/50rem;
				text-align: center;
				margin-top: 20/50rem;
			}
			.zc{
				margin-top: 10/50rem;
				font-size: 16/50rem;
				color:#fff;
				span{
					color:#3AAE95;
				}
			}
			.tx{
				width: 100/50rem;
				height: 100/50rem;
				background: #fff;
				border-radius: 50%;
				margin: 0 auto;
			}
			.el-input__inner{
				width: 270/50rem;
				background: #6d6d6d;
				color: #fff;
			}
			form{
				position: relative;
			}
			.hq{
				color:#3AAE95;
				border: 1/50rem solid #3AAE95;
				border-radius: 20/50rem;
				font-size: 13/50rem;
				padding: 3/50rem 10/50rem;
				position: absolute;
				right: 10/50rem;
				top: 35/50rem;
			}
		}
	}
</style>